<template>
  <div class="h-full p-10px box-border">
    <div class="w-full flex items-center text-base">
      <div class="mr-20px cursor-pointer border-b-2"
           :class="[optionActive === 1 ? 'border-blue-600 text-blue-600':'border-light-50']"
           @click="setOptionActive(NOTICE_TAB.SYSTEM)">
        系统
      </div>
      <div class="cursor-pointer border-b-2"
           :class="[optionActive === 2 ? 'border-blue-600 text-blue-600':'border-light-50']"
           @click="setOptionActive(NOTICE_TAB.USER)">
        用户
      </div>
    </div>
    <div class="mt-20px">
      <div v-if="optionActive === NOTICE_TAB.SYSTEM">system</div>
      <div v-if="optionActive === NOTICE_TAB.USER">user</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useOptionActive} from "@/hooks"

const NOTICE_TAB = {
  SYSTEM: 1,
  USER: 2
}

const {optionActive, setOptionActive} = useOptionActive([NOTICE_TAB.SYSTEM, NOTICE_TAB.USER])
</script>

<style scoped>

</style>